<template>
  <!-- 线路管理 -->
  <div class="container">
    <div class="app-container">
      <h3>线路管理</h3>
      <el-card class="road_line">
        <el-form inline>
          <el-row :gutter="1">
            <el-col :span="6">
              <el-form-item label="线路编号:" class="itemStyle" label-width="2">
                <el-input placeholder="请输入编号" style="width:400px;" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="线路名称:" class="itemStyle" label-width="2">
                <el-input placeholder="请输入车牌号码" style="width:400px;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="起始地机构:" label-width="2">
                <el-select v-model="model" placeholder="" style="width:400px;">
                  <el-input placeholder="一个字" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="1">
            <el-col :span="6">
              <el-form-item label="目的地机构:" label-width="2">
                <el-select v-model="model" placeholder="" style="width:400px;">
                  <el-input placeholder="一个字" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button type="primary ">搜索</el-button>
                <el-button type="primary ">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <el-card class="road_line">

        <div class="btn_line">
          <el-button type="primary ">新增线路</el-button>
          <el-button type="primary ">成本设置</el-button>
        </div>

        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            fixed
            prop="date"
            label="线路编号"
            width="150"
          />
          <el-table-column
            prop="name"
            label="线路名称"
            width="120"
          />
          <el-table-column
            prop="province"
            label="线路类型"
            width="120"
          />
          <el-table-column
            prop="city"
            label="起始地机构"
            width="120"
          />
          <el-table-column
            prop="address"
            label="目的地机构"
            width="300"
          />
          <el-table-column
            prop="zip"
            label="距离（千米）"
            width="120"
          />
          <el-table-column
            prop="zip"
            label="成本（元）"
            width="120"
          />
          <el-table-column
            prop="zip"
            label="预计时间（分钟）"
            width="120"
          />

          <el-table-column
            fixed="right"
            label="操作"
            width="100"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">手动调整</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="text-align: center;">
          <span class="demonstration" />
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>

    </div>
  </div>
</template>
<script>
export default {
  name: 'Transportation'
}
</script>
<style scoped lang='scss'>
.road_line{
width: 100%;
margin-bottom: 20px;
}
.btn_line{
  margin-bottom: 20px;
}
.btnStyle{

}
.itemStyle{

}
.app-container{

}
.status{
  display: flex;
}
.iptStyle{
  // width: 410px;
  // height: 40px;
}
</style>
